<template>
  <div>
    <app-table :data :columns :loading>
      <template #index="{ $index }">
        {{ ($index + 1) + ((pagination.page - 1) * pagination.size) }}
      </template>
      <template #status="{ row }">
        <el-link type="success" v-if="row.status">成功</el-link>
        <el-link type="danger" v-else>失败</el-link>
      </template>
      <template #pagination>
        <app-pagination :pager-count="8" class="app-margin-top-interval" layout="pager,total" v-bind="pagination" @change="getCrontabLogList"></app-pagination>
      </template>
    </app-table>
  </div>
</template>
<script lang="ts">
import {defineComponent, ref} from "vue"
import {getCrontabLogListApi} from "@/apps/admin/api/system/crontab";
import {TableColumn} from "@/components/AppTable/TableType";

export default defineComponent({
  props: {
    sign: {
      required: true,
      type: String
    }
  },
  setup(props) {
    const columns: TableColumn[] = [
      {label: "序号", prop: "index", minWidth: 100},
      {label: "执行状态", prop: 'status', minWidth: 100},
      {label: "时间", prop: 'time', type: "timestramp", minWidth: 180},
    ]

    const loading = ref(false)

    const pagination = ref({size: 0, total: 0, page: 1})

    const data = ref([])

    /**
     * 获取任务日志
     */
    function getCrontabLogList(page: number, size: number) {
      loading.value = true
      getCrontabLogListApi({page, size, sign: props.sign}).then(result => {
        if (result.code === 200) {
          pagination.value = {size: result.data.size, total: result.data.total, page: result.data.current}
          data.value = result.data.list
        }
        loading.value = false
      })
    }

    getCrontabLogList(pagination.value.page, pagination.value.size)

    return {
      data, pagination, columns, loading, getCrontabLogList
    }
  }
})
</script>